<template>
  <div id="footer" class="footer">
    <router-link to="/"  class="item" @click.native="showOnes">
      <div class="iconfont icon-icon--copy user-icon"></div>
      <div class="user-name">随机下单</div>
    </router-link>
<!--选择模式、性别、等级-->
    <van-popup
      v-model="showOne"
      class="place-order"
      closeable
      close-icon="close"
    >
      <div class="place-order-wrapper">
        <div class="chat-type-title">选择聊天模式</div>
        <div class="chat-type">
          <button class="chat-type-list" v-for="(item , index) in typeList" :key="item.typeId" :class="{actType:ind==index}" @click="changeBkg(index)">{{item.typeName}}</button>
        </div>
        <div class="chat-sex-title">请选择性别</div>
        <div class="chat-sex">
          <div class="chat-sex-list-wrapper" v-for="(item , index) in sexList" :key="index" :class="{sexType:inde==index}" @click="changeBk(index)">
            <div v-if="item.sex=='1'" class="chat-sex-list icon iconfont icon-sex-1">
               <span class="chat-sex-list-checked"></span>
            </div>
            <div v-else class="chat-sex-list icon iconfont icon-female">
              <span class="chat-sex-list-checked"></span>
            </div>
          </div>
        </div>
        <div class="chat-grade-title">请选择等级</div>
        <div class="chat-grade">
          <button class="chat-grade-list" v-for="(item , index) in gradeList" :key="item.gradeId" :class="{gradeType:indes==index}" @click="changeB(index)">{{item.gradeType}}</button>
        </div>
      </div>
      <div class="next-one-wrapper">
        <button class="next-one" @click="nextTwo">立即下单</button>
      </div>
    </van-popup>



<!--选择标签、类型、备注等-->
    <van-popup
      v-model="showTwo"
      class="place-order-two"
      closeable
      close-icon="close"
    >
    <div class="place-order-wrapper-two">
       <div class="chat-tag-title">选择标签</div>
       <div class="chat-tag-list-wrapper">
          <button class="chat-tag-list" v-for="(item , index) in tagList" :key="item.tagId" :class="{tagType:tag==index}" @click="changeTag(index)">{{item.tagName}}</button>
       </div>
       <div class="chat-talk-title">倾诉类型</div>
       <div class="chat-talk-list-wrapper">
         <button class="chat-talk-list" v-for="(item , index) in talkList" :key="item.talkId" :class="{talkType:talk==index}" @click="changeTalk(index)">{{item.talkName}}</button>
       </div>
       <div class="chat-mark-title">备注</div>
       <div class="chat-mark-info">
          <textarea placeholder="其他？（选填）" class="mark-info"></textarea>
       </div>
       <div class="next-two">
         <button class="prve-one" @click="prveOne">上一步</button> <button class="next-one" @click="nextTwoAdd">下一步</button>
       </div>
    </div>
    </van-popup>


    <!--选择聊天类型-->
    <van-popup
      v-model="showTwoAdd"
      class="place-order-two-add"
      closeable
      close-icon="close"
    >
      <div class="place-order-wrapper-two-add">
        <div class="chat-server-title">服务类型</div>
        <div class="chat-server-list-wrapper">
          <button class="chat-server-list" v-for="(item , index) in serverList" :key="item.serverType" :class="{serverType:server==index}" @click="changeServer(index)">{{item.serverName}}</button>
        </div>
        <div class="chat-time-title">时长</div>
        <div class="chat-time-list-wrapper">
          <button class="chat-time-list" v-for="(item , index) in longTimeList" :key="item.longTimeId" :class="{longTimeType:longTime==index}" @click="changeLongTime(index)">{{item.longTime}}</button>
        </div>
        <div class="chat-consume-title">消耗</div>
        <div class="chat-consume-info">
          16奇妙币
        </div>
        <div class="next-two">
          <button class="next-one" @click="nextThree">立即下单</button>
        </div>
      </div>
    </van-popup>





<!--输入微信-->
    <van-popup
      v-model="showThree"
      class="place-order-three"
      closeable
      close-icon="close"
    >
    <div class="place-order-three-wrapper">
        <div class="wechat-title">微信号</div>
        <div class="wechat-name-wrapper">
          <input type="text" class="wechat-name" placeholder="请输入微信号">
        </div>
        <div class="wechat-tips">提醒：请确保微信输入正确，并关闭微信隐私设置，否则店员将无法添加您为好友哦~</div>
        <div class="wechat-tips-presonal">如何关闭微信隐私设置？</div>
        <div class="next-three">
          <button class="prve-one" @click="prveTwoAdd">上一步</button> <button class="next-one" @click="nextFour">下一步</button>
        </div>
    </div>
    </van-popup>


    <!--状态-->
    <van-popup
      v-model="showFour"
      class="place-order-four"
      closeable
      close-icon="close"
    >
       <div class="place-order-wrapper">
       <!--付款成功-->
         <div class="pay-success" style="display: none">
             <div class="success-pic-wrapper">
               <img src="@/assets/img/success.png" alt="" class="success-pic">
             </div>
             <div class="success-text">付款成功</div>
             <div class="success-read">
                <button class="detail">查看详情</button>
             </div>
         </div>
       <!--支付失败-->
         <div class="pay-error" style="display: none">
           <div class="error-pic-wrapper" >
             <img src="@/assets/img/error.png" alt="" class="error-pic">
           </div>
           <div class="error-text">支付失败</div>
           <div class="error-tips">您取消了支付</div>
           <div class="error-confirm">
             <button class="confirm">确定</button>
           </div>
         </div>
       <!--充值-->
         <div class="pay-recharge">
           <div class="recharge-pic-wrapper" >
             <img src="@/assets/img/recharge.png" alt="" class="recharge-pic">
           </div>
           <div class="recharge-text">奇妙币不足</div>
           <div class="recharge-tips-wrapper">
             <div class="recharge-tips">
               您的奇妙币数量不足，暂时无法下单。
               请充值后再来吧~
             </div>
           </div>
           <div class="recharge-go-wrapper">
             <router-link to="/wallet" class="recharge-go">我要充值</router-link>
           </div>
         </div>
       </div>
    </van-popup>




    <router-link
      :to="item.url"
      class="item"
      :class="{ on: item.url === $route.path }"
      v-for="(item, index) in footerList"
      :key="index"
    >
      <div
        class="iconfont user-icon"
        :class="item.icon1 + ' ' + (item.url === $route.path ? item.icon2 : '')"
      ></div>
      <div class="user-name">{{ item.name }}</div>
    </router-link>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Popup} from 'vant';
  Vue.use(Popup);
    export default {
      name: "UserFooter",
      data: function() {
          return {
            footerList: [
              {
                name: "聊一聊",
                icon1: "icon-duihua-copy",
                icon2: "icon-duihua",
                url: "/"
              },
              {
                name: "我的",
                icon1: "icon-gerenzhongxin",
                icon2: "icon-gerenzhongxin",
                url: "/my"
              },
            ],
            showOne: false,
            showTwo: false,
            showTwoAdd:false,
            showThree: false,
            showFour:false,
            active: 'home',
            typeList:[
              {
                typeId:'1',
                typeName:'树洞倾诉'
              },
              {
                typeId:'2',
                typeName:'奇妙畅谈'
              }
            ],
            sexList:[
              {
               sex:'1'
              },
              {
                sex:'2'
              }
            ],
            gradeList:[
              {
                gradeId:'3',
                gradeType:'中级'
              },
              {
                gradeId:'2',
                gradeType:'高级'
              },
              {
                gradeId:'1',
                gradeType:'特级'
              }
            ],
            tagList:[
              {
                tagId:'1',
                tagName:'成熟的'
              },
              {
                tagId:'2',
                tagName:'温柔的'
              },
              {
                tagId:'3',
                tagName:'理性'
              },
              {
                tagId:'4',
                tagName:'幽默'
              },
              {
                tagId:'5',
                tagName:'声控'
              }
            ],
            talkList:[
              {
                talkId:'3',
                talkName:'情感'
              },
              {
                talkId:'2',
                talkName:'家庭'
              },
              {
                talkId:'1',
                talkName:'工作'
              }
            ],
            serverList:[
              {
                serverType:'1',
                serverName:'文字'
              },
              {
                serverType:'2',
                serverName:'语音'
              }
            ],
            longTimeList:[
              {
                longTimeId:'1',
                longTime:'30分钟'
              },
              {
                longTimeId:'2',
                longTime:'60分钟'
              },
              {
                longTimeId:'3',
                longTime:'1天'
              },
              {
                longTimeId:'4',
                longTime:'7天'
              },
              {
                longTimeId:'5',
                longTime:'30天'
              }
            ],
            ind:'',
            inde:'',
            indes:'',
            tag:'',
            server:'',
            longTime:'',
            talk:'',
            rondom:false
          }
      },
      methods: {
        showOnes() {
          this.showOne = true;
          console.log
          this.rondom = true;
        },
        changeBkg:function (index) {
          this.ind=index;
        },
        changeBk:function (index) {
          this.inde=index;
        },
        changeB:function (index) {
          this.indes=index;
        },
        changeServer:function (index) {
          this.server=index;
        },
        changeLongTime:function (index) {
          this.longTime=index;
        },
        changeTag:function (index) {
          this.tag=index;
        },
        changeTalk:function (index) {
          this.talk=index;
        },
        prveOne:function (){
          this.showTwoAdd = false;
          this.showOne = true;
        },
        nextTwo:function () {
          this.showOne = false;
          this.showTwo = true;
        },
        nextTwoAdd:function () {
          this.showTwo = false;
          this.showTwoAdd = true;
        },
        nextThree:function () {
          this.showTwoAdd = false;
          this.showThree = true;
        },
        prveTwoAdd:function (){
          this.showThree = false;
          this.showTwoAdd = true;
        },
        nextFour:function () {
          this.showThree = false;
          this.showFour = true;
        },
      }
    }
</script>

<style scoped lang="stylus">
  @import '~style/mixins.styl'
  @import '~style/varibles.styl'
  .footer
     position fixed
     bottom 0
     height 1.2rem
     between()
     width 100%
     border-top 1px solid #E3E3E3
     background-color #fff
     .item
        center()
        flex-direction column
        width calc(100% / 3)
        color #D8D8D8
        .user-icon
          center-align-items()
          height .6rem
          font-size .5rem
        .user-name
          center-align-items()
          height .5rem
 /*    .rondom
       .user-icon
         color $DefaultColor
       .user-name
         color $DefaultColor*/
     .on
        .user-icon
           center-align-items()
           height .6rem
           font-size .5rem
           color $DefaultColor
        .user-name
           center-align-items()
           height .5rem
           color #000
     .place-order
       width 6rem
       border-radius .2rem
       overflow:scroll
       overflow-y:hidden
       .place-order-wrapper
         padding .3rem
         .chat-type-title
           font-size .3rem
           color #333
           padding-top .2rem
         .chat-type
           between-align-items()
           .chat-type-list
             margin .4rem 0
             width 2.5rem
             border-radius .3rem
             height .7rem
             font-size .3rem
             background-color #fff
             border 1px solid $DefaultTextColor
             color $DefaultTextColor
           .actType
             color $DefaultTextColor
             background $DefaultWalletColor
             border 1px solid $DefaultTextColor
         .chat-sex-title
           font-size .3rem
           color #333
         .chat-sex
           around-align-items()
           .chat-sex-list-wrapper
             .chat-sex-list:before
               z-index 9
             .chat-sex-list
               margin .3rem 0
               width 1.7rem
               height 1.7rem
               font-size .7rem
               center-align-items()
               color #AD9ED6
               border-radius 50%
               position relative
               .chat-sex-list-checked
                 position absolute
                 display flex
                 width 1rem
                 height 1rem
                 border-radius 50%
                 background-color #F3F0FB
                 z-index 8
                 top .7rem
           .sexType>.chat-sex-list>.chat-sex-list-checked
             position absolute
             display flex
             width 1rem
             height 1rem
             border-radius 50%
             background-color $DefaultColor
             top .7rem
             z-index 8
         .chat-grade-title
           font-size .3rem
           color #333
         .chat-grade
           between-align-items()
           padding .3rem 0
         .chat-grade-list
           width 1.6rem
           height .7rem
           background-color #fff
           color $DefaultTextColor
           border 1px solid $DefaultTextColor
           border-radius .3rem
         .gradeType
           color $DefaultTextColor
           border 1px solid $DefaultTextColor
           background-color $DefaultWalletColor
       .next-one-wrapper
         padding 0 .5rem .5rem .5rem
         .next-one
           width 100%
           background-color $DefaultWalletColor
           color $DefaultTextColor
           height .9rem
           border-radius .1rem
     .place-order-two
       width 6rem
       border-radius .2rem
       .place-order-wrapper-two
         padding .3rem
         .chat-tag-title
           font-size .3rem
           color #333
           padding .05rem 0 0 .1rem
         .chat-tag-list-wrapper
           between-align-items()
           flex-wrap wrap
           .chat-tag-list
             margin-top .3rem
             width 1.6rem
             height .7rem
             border-radius .3rem
             border 1px solid $DefaultTextColor
             color $DefaultTextColor
             background-color #fff
           .tagType
             color $DefaultTextColor
             background-color $DefaultColor
             border 1px solid $DefaultTextColor
         .chat-tag-list-wrapper:after
           content ''
           width 33.33%
         .chat-talk-title
           font-size .3rem
           color #333
           padding .3rem 0
         .chat-talk-list-wrapper
           between-align-items()
           flex-wrap wrap
           .chat-talk-list
             width 1.6rem
             height .7rem
             border-radius .3rem
             border 1px solid $DefaultTextColor
             color $DefaultTextColor
             background-color #fff
           .talkType
             color $DefaultTextColor
             border 1px solid $DefaultTextColor
             background-color $DefaultColor
         .chat-mark-title
           font-size .3rem
           color #333
           padding .3rem 0
         .chat-mark-info
           .mark-info
             width calc(100% - .4rem)
             background-color #F6F6F7
             padding .2rem
             color #666
             font-size .26rem
         .next-two
           between-align-items()
           padding .4rem 0 .1rem 0
           .prve-one
             color #333
             font-size .3rem
             width 2rem
             background-color #fff
             center()
           .next-one
             width 3.6rem
             border-radius .1rem
             color $DefaultTextColor
             height .8rem
             background-color $DefaultWalletColor
    .place-order-two-add
      width 6rem
      border-radius .2rem
      .place-order-wrapper-two-add
        padding .3rem
        .chat-server-title
          font-size .3rem
          color #333
          padding .05rem 0 0 .1rem
        .chat-server-list-wrapper
          between-align-items()
          flex-wrap wrap
          .chat-server-list
            margin-top .3rem
            width: calc(50% - .1rem);
            height .7rem
            border-radius .3rem
            border 1px solid $DefaultTextColor
            color $DefaultTextColor
            background-color #fff
          .serverType
            color $DefaultTextColor
            background-color $DefaultColor
            border 1px solid $DefaultTextColor
        .chat-server-list-wrapper:after
          content ''
          width 33.33%
        .chat-time-title
          font-size .3rem
          color #333
          padding .3rem 0
        .chat-time-list-wrapper
          between-align-items()
          flex-wrap wrap
          .chat-time-list
            width 1.6rem
            height .7rem
            border-radius .3rem
            border 1px solid $DefaultTextColor
            color $DefaultTextColor
            background-color #fff
            margin-bottom .3rem
          .longTimeType
            color $DefaultTextColor
            border 1px solid $DefaultTextColor
            background-color $DefaultColor
        .chat-time-list-wrapper:after
          content ''
          width 33.33%
        .chat-consume-title
          font-size .3rem
          color #333
          padding 0 0 .3rem 0
        .chat-consume-info
          font-size .3rem
          color $DefaultTextColor
        .next-two
          between-align-items()
          padding .4rem 0 .1rem 0
          .next-one
            width 100%
            border-radius .1rem
            color $DefaultTextColor
            height .8rem
            background-color $DefaultWalletColor
     .place-order-three
       width 6rem
       border-radius .2rem
       .place-order-three-wrapper
         padding .3rem
         .wechat-title
           font-size .3rem
           color #333
           padding .3rem
         .wechat-name-wrapper
           .wechat-name
             height .6rem
             width calc(100% - .2rem)
             color #666
             padding-left .2rem
             font-size .26rem
             border-radius .3rem
             background-color #F6F6F7
         .wechat-tips
           margin .3rem 0
           font-size .2rem
           line-height .3rem
           color #666
         .wechat-tips-presonal
           margin .3rem 0
           font-size .2rem
           line-height .3rem
           color $DefaultColor
         .next-three
           between-align-items()
           padding .4rem 0 .1rem 0
           .prve-one
             color #333
             font-size .3rem
             width 2rem
             background-color #fff
             center()
           .next-one
             width 3.6rem
             border-radius .1rem
             color $DefaultTextColor
             height .8rem
             background-color $DefaultWalletColor
     .place-order-four
       width 6rem
       border-radius .2rem
       overflow:scroll
       overflow-y:hidden
       .pay-success
         .success-pic-wrapper
           padding-top .85rem
           center()
           .success-pic
             width 1.5rem
             height 1.5rem
         .success-text
           center()
           padding .3rem 0 1.07rem 0
           color #333
           font-size .3rem
         .success-read
           padding 0 .3rem .3rem .3rem
           .detail
             width 100%
             border-radius .3rem
             background-color #CED1EF
             color #fff
             height .7rem
       .pay-error
         .error-pic-wrapper
           padding-top .85rem
           center()
           .error-pic
             width 1.5rem
             height 1.5rem
         .error-text
           center()
           padding .3rem 0 .2rem 0
           color #333
           font-size .3rem
         .error-tips
           font-size .2rem
           color #666
           center()
           padding-bottom .5rem
         .error-confirm
           padding 0 .3rem .3rem .3rem
           .confirm
             width 100%
             border-radius .3rem
             background-color #CED1EF
             color #fff
             height .7rem
       .pay-recharge
         .recharge-pic-wrapper
           padding-top .85rem
           center()
           .recharge-pic
             width 1.5rem
             height 1.5rem
         .recharge-text
           center()
           padding .3rem 0 .2rem 0
           color #333
           font-size .3rem
         .recharge-tips-wrapper
           center()
           padding-bottom .5rem
           .recharge-tips
             width 3.5rem
             font-size .2rem
             color #666
             line-height .3rem
         .recharge-go-wrapper
           padding 0 .3rem .3rem .3rem
           .recharge-go
             center-align-items()
             width 100%
             border-radius .1rem
             background-color $DefaultWalletColor
             color $DefaultTextColor
             height .9rem

</style>
<style scode>
   .footer .item:nth-of-type(1) .user-icon{
     color:#D8D8D8;
   }
   .footer .item:nth-of-type(1) .user-name{
     color:#D8D8D8
   }
   .footer .chat-sex-list-checked{
    right: .1rem;
  }
   .footer .sexType>.chat-sex-list>.chat-sex-list-checked{
    right: .1rem;
  }

</style>
